<template>
  <div>
    <Header></Header>
    <div class="article">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="">用人单位</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--用人单位-->
    <div class="article" style="margin-bottom: 20px;">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card style="min-height: 1200px;overflow:visible;">
            <div slot="header" class="clearfix">
              <el-divider>这里的每一家企业都是学校认证的哦！</el-divider>
            </div>
            <!--职位列表-->
            <ul class="post-list">
              <li  v-for="(item,index) in companyList" :key="item.id">
                <a href="#">
                  {{item.name}}
                  <span style="float: right">
                        <router-link :to="`/front/companyDetail/${item.id}`">
                         <el-button type="primary"  size="mini" round>公司详情</el-button>
                        </router-link>
                        <el-button type="danger"  size="mini" @click="saveFavorCompany(item.id)" round>收藏</el-button>
                  </span>
                </a>
                <p>
                  <span style="color: red;font-weight: bolder;">{{item.address}}</span>
                  <span>{{item.type}}</span>
                  <span>{{item.size}}</span>
                  <span>{{item.companyName}}</span>
                </p>
              </li>
            </ul>
            <!--职位列表-->
            <el-pagination
                style="margin-top: 20px; text-align: center"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 50, 100]"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total,sizes, prev, pager, next, jumper"
                background>
            </el-pagination>
          </el-card>
        </el-col>
        <!--职位列表-->

        <!--热点文章展示区-->
        <el-col :span="8">

          <!--热点文章的卡片区-->
          <el-row :gutter="20">
            <HotArticle></HotArticle>
          </el-row>
          <!--热点文章的卡片区-->



        </el-col>
        <!--热点文章展示区-->
      </el-row>
    </div>
    <!--用人单位-->
    <Footer></Footer>
  </div>
</template>

<script>
      import '../assets/css/styles.css'
      import Header from "@/front/inc/Header";
      import Footer from "@/front/inc/Footer";
      import HotArticle from "@/front/inc/HotArticle";
      import {getCompanyList} from "@/api/company";
      import {saveCompany} from "@/api/favor";
export default {
  name: "CompanyList",
  components: {HotArticle, Footer, Header},
  data(){
    return {
      pagination: {
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryParams: {}//查询条件
      },//分页数据模型数
      companyList:[],//职位列表
    }
  },
  mounted() {
    this.findCompanyListByPage()
  },
  methods:{
    //保存喜爱的公司
    saveFavorCompany(id) {
      saveCompany(id).then(res => {
        this.$message({
          showClose: true,
          message: '收藏公司信息成功！',
          type: 'success',
          onClose: () => {
            this.findCompanyListByPage()
          }
        })
      });
    },
    //查询公司信息
    findCompanyListByPage(){
        getCompanyList(this.pagination).then(res=>{
          this.companyList = res.data.rows
          this.pagination.total = res.data.total
        })
    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findCompanyListByPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findCompanyListByPage()
    },
  },
}
</script>

<style scoped>

</style>
